<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>

    <!--  卡片视图区-->
    <el-card>
      <!--头部-->
      <div>
        <!--提示区-->
        <el-alert title="注意：只允许操作第三级目录" type="warning" show-icon></el-alert>
        <!--级联选择器区-->
        选择商品分类：<el-cascader
          style="margin:10px"
            v-model="cascaderChoose"
            :options="cateData"
            clearable
            :props="{ expandTrigger: 'hover' ,
                  value:'cat_id',
                  label: 'cat_name',
                  children: 'children'}"
            @change="cascaderChange"
        ></el-cascader>
      </div>
      <!--主体-->
      <div>
        <!--切换标签页-->
        <el-tabs v-model="activeTableName" @tab-click="tableClick">
          <!--静态属性面板-->
          <el-tab-pane label="静态属性" name="static">
            <!--按钮区-->
            <el-button type="primary" size="mini" :disabled="cascaderChoose.length!==3" @click="isShowStaticAdd=!isShowStaticAdd">添加属性</el-button>
            <!--表格区-->
            <el-table :data="staticTableData" style="width: 100%" stripe >
              <!--下拉表格-->
              <el-table-column type="expand" v-slot="slot" >
                <el-tag
                    v-for="(a,index) in slot.row.attr_vals.split(' ')"
                    v-if="a!==''"
                    closable
                    style="margin: 10px"
                    @close="paramsDataClose(slot.row,index)">
                  {{ a }}
                </el-tag>
                <el-input
                    class="input-new-tag"
                    v-if="isChangeTag"
                    v-model="inputData"
                    ref="saveTagInput"
                    style="width:100px"
                    @keyup.enter.native="addParamsData(slot.row)"
                    @blur="addParamsData(slot.row)"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="isChangeTag=!isChangeTag">+ New Tag</el-button>
              </el-table-column>
              <el-table-column type="index"></el-table-column>
              <el-table-column prop="attr_name" label="属性名称"></el-table-column>
              <el-table-column label="操作" v-slot="slot">
                <el-button type="primary" @click="editStaticParams(slot.row)">编译</el-button>
                <el-button type="danger" @click="deleteParams(slot.row.attr_id)">删除</el-button>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!--动态参数面板-->
          <el-tab-pane label="动态参数" name="dynamic">
            <!--按钮区-->
            <el-button type="primary" size="mini" :disabled="cascaderChoose.length!==3" @click="isShowDynamicAdd=!isShowDynamicAdd">添加参数</el-button>
            <!--表格区-->
            <el-table :data="dynamicTableData" style="width: 100%" stripe >
              <!--下拉表格-->
              <el-table-column type="expand" v-slot="slot" >
                <el-tag
                    :disable-transitions="false"
                    v-for="(a,index) in slot.row.attr_vals.split(' ')"
                    v-if="a!==''"
                    closable
                    style="margin: 10px"
                    @close="paramsDataClose(slot.row,index)">
                  {{ a }}
                </el-tag>
                <el-input
                    class="input-new-tag"
                    v-if="isChangeTag"
                    v-model="inputData"
                    ref="saveTagInput"
                    style="width:100px"
                    @keyup.enter.native="addParamsData2(slot.row)"
                    @blur="addParamsData2(slot.row)"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="isChangeTag=!isChangeTag">+ New Tag</el-button>
              </el-table-column>
              <el-table-column type="index"></el-table-column>
              <el-table-column prop="attr_name" label="属性名称"></el-table-column>
              <el-table-column label="操作" v-slot="slot">
                <el-button type="primary" @click="editDynamicParams(slot.row)">编译</el-button>
                <el-button type="danger" @click="deleteParams(slot.row.attr_id)">删除</el-button>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

    <!--弹出框区-->
    <div>
      <!--静态参数添加-->
      <el-dialog :visible.sync="isShowStaticAdd" title="添加静态参数" @close="closeStaticDialog">
        <!--表单区-->
        <el-form ref="staticForm" :model="staticForm" :rules="rules">
          <el-form-item label="参数名称" prop="attr_name">
            <el-input v-model="staticForm.attr_name"></el-input>
          </el-form-item>
          <el-form-item label="参数值" prop="attr_vals">
            <el-input v-model="staticForm.attr_vals"></el-input>
          </el-form-item>
        </el-form>
        <!--按钮区-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowStaticAdd = false">取 消</el-button>
          <el-button type="primary" @click="addStatic">确 定</el-button>
        </span>
      </el-dialog>

      <!--动态参数添加-->
      <el-dialog :visible.sync="isShowDynamicAdd" title="添加动态参数" @close="closeDynamicDialog">
        <!--表单区-->
        <el-form ref="dynamicForm" :model="dynamicForm" :rules="rules">
          <el-form-item label="参数名称" prop="attr_name">
            <el-input v-model="dynamicForm.attr_name"></el-input>
          </el-form-item>
          <el-form-item label="参数值" prop="attr_vals">
            <el-input v-model="dynamicForm.attr_vals"></el-input>
          </el-form-item>
        </el-form>
        <!--按钮区-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowDynamicAdd = false">取 消</el-button>
          <el-button type="primary" @click="addDynamic">确 定</el-button>
        </span>
      </el-dialog>

      <!--静态编译-->
      <el-dialog :visible.sync="isShowStaticEdit" title="编译静态参数" >
        <!--表单区-->
        <el-form :model="SE" :rules="rules">
          <el-form-item label="属性名称" prop="attr_name"><el-input v-model="SE.attr_name"></el-input></el-form-item>
        </el-form>
        <!--按钮区-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowStaticEdit = false">取 消</el-button>
          <el-button type="primary" @click="editStatic">确 定</el-button>
        </span>
      </el-dialog>

      <!--动态编译-->
      <el-dialog :visible.sync="isShowDynamicEdit" title="编译动态参数" >
        <!--表单区-->
        <el-form :model="DE" :rules="rules">
          <el-form-item label="属性名称" prop="attr_name"><el-input v-model="DE.attr_name"></el-input></el-form-item>
        </el-form>
        <!--按钮区-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowDynamicEdit = false">取 消</el-button>
          <el-button type="primary" @click="editDynamic">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  name: "Params",
  data() {
    return {
      inputValue:'',
      //练级选择器选择的数据
      cascaderChoose: [],
      //所有的商品
      cateData: [],
      //获取到的参数
      params: {},
      //点击的标签页
      activeTableName: 'static',
      //静态数据
      staticTableData: [],
      //动态数据
      dynamicTableData: [],
      //静态添加表格数据
      staticForm: {
        attr_name: '',
        attr_vals: '',
        attr_sel: 'only'
      },
      //动态添加表格数据
      dynamicForm: {
        attr_name: '',
        attr_vals: '',
        attr_sel: 'many'
      },
      //静态编译数据
      SE:{
        attr_name:'',
        attr_sel:'only',
        attr_vals:'',
        attrId:'',
      },
      //动态编译数据
      DE:{
        attr_name:'',
        attr_sel:'many',
        attr_vals:'',
        attrId:''
      },
      //表格验证
      rules: {
        attr_name: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],
      },
      //添加属性值
      inputData:'',
      //是否展示添加对话框
      isShowStaticAdd: false,
      isShowDynamicAdd: false,
      //是否展示编译对话框
      isShowStaticEdit:false,
      isShowDynamicEdit:false,
      //标签与输入框的切换
      isChangeTag:false
    }
  },
  methods: {
    //获取商品列表列表
    getCateList() {
      this.$http.get('categories').then(res => {
        this.cateData = res.data.data
      })
    },
    //获取静态参数
    getStaticParams() {
      this.$http.get('categories/' + this.cascaderChoose[2] + '/attributes', {params: {sel: 'only'}}).then(res => {
        this.staticTableData = res.data.data
      })
    },
    //获取动态参数
    getDynamicParams() {
      this.$http.get('categories/' + this.cascaderChoose[2] + '/attributes', {params: {sel: 'many'}}).then(res => {
        this.dynamicTableData=res.data.data
      })
    },
    //获取参数
    getParams() {

      if (this.activeTableName === "static") {
        this.getStaticParams()
      }
      if (this.activeTableName === "dynamic") {
        this.getDynamicParams()
      }
    },
    //当级联选择器的数据发生改变
    cascaderChange() {
      //当不是第三级的时候，清空选择
      if (this.cascaderChoose.length !== 3) {
        return this.cascaderChoose = []
      }
      this.getParams()
    },
    //标签页点击事件
    tableClick() {
      this.getParams()
    },
    //编译静态参数
    editStaticParams(val) {
      this.isShowStaticEdit=!this.isShowStaticEdit
      this.SE.attrId=val.attr_id
      this.SE.attr_name=val.attr_name
    },
    //编译静态参数
    editDynamicParams(val) {
      this.isShowDynamicEdit=!this.isShowDynamicEdit
      this.DE.attrId=val.attr_id
      this.DE.attr_name=val.attr_name
    },
    //确认编译静态
    editStatic(){
      this.$http.put('categories/'+this.cascaderChoose[2]+'/attributes/'+this.SE.attrId,this.SE).then(res=>{
        if(res.data.meta.status!==200)return this.$message.error('更新失败')
        this.$message.success('更新成功')
        this.getParams()//重新获取列表
        this.isShowStaticEdit=!this.isShowStaticEdit//关闭对话框
      })
    },
    //确认编译动态
    editDynamic(){
      this.$http.put('categories/'+this.cascaderChoose[2]+'/attributes/'+this.DE.attrId,this.DE).then(res=>{
        if(res.data.meta.status!==200)return this.$message.error('更新失败')
        this.$message.success('更新成功')
        this.getParams()//重新获取列表
        this.isShowDynamicEdit=!this.isShowDynamicEdit//关闭对话框
      })
    },
    //删除参数
    deleteParams(id) {
      this.$confirm('确定删除吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$http.delete('categories/'+this.cascaderChoose[2]+'/attributes/'+id).then(res=>{
          if(res.data.meta.status!==200)return this.$message.error('请求失败')
          this.$message.success('删除成功')
          this.getParams()
        }).catch(()=>{
          this.$message.error('删除失败')
        })
      })
    },
    //关闭静态添加对话框
    closeStaticDialog() {
      this.$refs.staticForm.resetFields()
    },
    //关闭动态添加对话框
    closeDynamicDialog() {
      this.$refs.dynamicForm.resetFields()
    },
    //添加静态属性
    addStatic() {
      this.$http.post('categories/' + this.cascaderChoose[2] + '/attributes', this.staticForm).then(res => {
        if (res.data.meta.status !== 201) return this.$message.error('添加失败')
        this.$message.success('添加成功')
        this.getParams()//刷新参数页面
        this.isShowStaticAdd = !this.isShowStaticAdd //关闭对话框
      })
    },
    //添加动态属性
    addDynamic() {
      this.$http.post('categories/' + this.cascaderChoose[2] + '/attributes', this.dynamicForm).then(res => {
        if (res.data.meta.status !== 201) return this.$message.error('添加失败')
        this.$message.success('添加成功')
        this.getParams()//刷新参数页面
        this.isShowDynamicAdd = !this.isShowDynamicAdd //关闭对话框
      })
    },
    //添加属性值【静态】
    addParamsData(row){
      this.isChangeTag=!this.isChangeTag//切换按钮
      row.attr_vals=row.attr_vals+' '+this.inputData  //实现vue的监控，时时改变
      this.inputData='' //清空输入框
      this.SE.attr_name=row.attr_name
      this.SE.attr_vals=row.attr_vals
        this.$http.put(`categories/${this.cascaderChoose[2]}/attributes/${row.attr_id}`,this.SE).then(res=>{
          if(res.data.meta.status!==200)return this.$message.error("添加失败")
          this.$message.success("添加成功")
          this.SE.attr_name=''//还原
          this.SE.attr_vals=''
      })
    },
    //添加属性值【动态】
    addParamsData2(row){
      this.isChangeTag=!this.isChangeTag//切换按钮
      row.attr_vals=row.attr_vals+' '+this.inputData  //实现vue的监控，时时改变
      this.inputData='' //清空输入框
      this.DE.attr_name=row.attr_name
      this.DE.attr_vals=row.attr_vals
        this.$http.put(`categories/${this.cascaderChoose[2]}/attributes/${row.attr_id}`,this.DE).then(res=>{
          if(res.data.meta.status!==200)return this.$message.error("添加失败")
          this.$message.success("添加成功")
          this.DE.attr_name=''//还原
          this.DE.attr_vals=''
      })
    },
    //点击小标签的叉叉【静态】
    paramsDataClose(row,index){
      row.attr_vals= row.attr_vals.split(' ')
      row.attr_vals.splice(index,1)
      row.attr_vals=row.attr_vals.join(' ')
      this.$http.put(`categories/${this.cascaderChoose[2]}/attributes/${row.attr_id}`,row).then(res=>{
        this.$message.success("删除成功")
      })
    },
  },
  created() {
    this.getCateList()
  }
}
</script>

<style scoped>

</style>